Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import  url(https://fonts.googleapis.com/css?family=Montserrat);

$ball_width: 50px;
$ball_height: $ball_width;
$bounce_height: 3 * $ball_width;
$bounce_delay: -0.8s;
$bounce_rate: 0.5s;

body {
	height: 100vh;
	padding: 2rem;
	display: grid;
	place-items: center;
	text-align: center;
	background-color: #f3f8ff;
}

.loader {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100px;
	height: 50px;
	margin: 0 auto;
}

.dot {
	position: relative;
  display: inline-block;
	padding: $ball_width / 2;
  height: $bounce_height + 7px;
  width: $ball_width;
  &:before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: $ball_width;
    height: $ball_height;
    border-radius: 50%;
    background-color: #ae17fb;
    transform-origin: 50%;
		animation: bounce $bounce_rate alternate infinite ease; /* you can try experimenting with the duration and animation-iteration-count here */
	}
}

.dot:nth-child(1):before {
	background-color: #e26ee5;
	animation-delay: 0 * $bounce_delay;
}

.dot:nth-child(2):before {
	background-color: #7e30e1;
	animation-delay: 1 * $bounce_delay;
}

.dot:nth-child(3):before {
	background-color: #49108b;
	animation-delay: 2 * $bounce_delay;
}

.dot:nth-child(4):before {
	background-color: #e26ee5;
	animation-delay: 3 * $bounce_delay;
}

.dot:nth-child(5):before {
	background-color: #7e30e1;
	animation-delay: 4 * $bounce_delay;
}

.dot:nth-child(6):before {
	background-color: #49108b;
	animation-delay: 5 * $bounce_delay;
}

.dot:nth-child(7):before {
	background-color: #e26ee5;
	animation-delay: 6 * $bounce_delay;
}

.dot:nth-child(8):before {
	background-color: #7e30e1;
	animation-delay: 7 * $bounce_delay;
}

.dot:nth-child(9):before {
	background-color: #49108b;
	animation-delay: 8 * $bounce_delay;
}

@keyframes bounce {
  0% {
    top: $bounce_height;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: $ball_width;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

Frontend Forever App